<template>
    <div class="patient-select-page">
        <!-- 顶部导航栏 -->
        <van-nav-bar title="选择就诊人" left-arrow @click-left="onBack" :border="false">
            <template #right>
                <van-icon name="ellipsis" size="18" class="nav-icon" />
                <van-icon name="search" size="18" class="nav-icon ml-3" />
            </template>
        </van-nav-bar>

        <!-- 页面内容 -->
        <div class="page-content">
            <!-- 提示文字 -->
            <div class="tip-text">
                请选择就诊人
            </div>

            <!-- 就诊人列表 -->
            <div v-if="patientList.length > 0" class="patient-section">
                <div class="patient-list">
                    <div v-for="patient in patientList" :key="patient.patientId" class="patient-item"
                        @click="selectPatient(patient)">
                        <div class="patient-info">
                            <div class="patient-header">
                                <span class="patient-name">{{ patient.name || '患者姓名' }}</span>
                                <span class="patient-tag" :class="getRelationshipClass(patient.relationship)">
                                    {{ patient.relationship || '关系' }}
                                </span>
                            </div>
                            <div class="patient-details">
                                <div class="detail-row">
                                    <span class="value">{{ maskIdCard(patient.idCardNum) || '未设置' }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="patient-action">
                            <span v-if="patient.isDefault" class="default-text">默认就诊人</span>
                            <span v-else class="add-text">选择</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 空状态 -->
            <div v-else class="empty-state">
                <van-empty description="暂无就诊人信息" />
                <van-button type="primary" @click="goToAddPatient">添加就诊人</van-button>
            </div>

        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { api } from '@/api'
import type { Patient } from '@/api'

const router = useRouter()

// 就诊人列表数据
const patientList = ref<Patient[]>([])

// 返回上一页
const onBack = () => {
    router.back()
}

// 选择就诊人
const selectPatient = (patient: Patient) => {
    console.log('选择就诊人:', patient)
    // 跳转到选择科室页面，传递患者信息
    router.push({
        name: 'department',
        query: {
            patientId: patient.patientId.toString(),
            name: patient.name || '',
            relationship: patient.relationship || '',
            idCardType: patient.idCardType || '身份证号',
            idCardNum: patient.idCardNum || '',
            medicalCard: patient.medicalCard || '',
            phone: patient.phone || '',
            address: patient.address || ''
        }
    })
}

// 获取就诊人列表
const loadPatients = async () => {
    try {
        const response = await api.getPatients()
        patientList.value = response.data || []
        console.log('就诊人列表数据：', response.data)
    } catch (error) {
        console.error('获取就诊人列表失败:', error)
        patientList.value = []
    }
}

// 获取关系标签样式类
const getRelationshipClass = (relationship: string) => {
    switch (relationship) {
        case '本人':
            return 'self'
        case '父母':
        case '父亲':
        case '母亲':
            return 'parent'
        case '配偶':
            return 'spouse'
        case '子女':
        case '儿子':
        case '女儿':
            return 'child'
        default:
            return 'other'
    }
}

// 身份证号脱敏处理
const maskIdCard = (idCard: string) => {
    if (!idCard) return ''
    if (idCard.length < 8) return idCard
    return idCard.substring(0, 3) + '*'.repeat(idCard.length - 6) + idCard.substring(idCard.length - 3)
}

// 跳转到添加就诊人页面
const goToAddPatient = () => {
    router.push('/patient/add')
}

// 页面加载时获取数据
onMounted(() => {
    loadPatients()
})

</script>

<style scoped>
.patient-select-page {
    min-height: 100vh;
    background-color: #f7f8fa;
}

/* 导航栏样式 */
:deep(.van-nav-bar) {
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

:deep(.van-nav-bar__title) {
    font-size: 17px;
    font-weight: 600;
    color: #323233;
}

.nav-icon {
    color: #323233;
}

.ml-3 {
    margin-left: 12px;
}

.page-content {
    padding: 24px 16px;
}

.tip-text {
    font-size: 16px;
    color: #323233;
    margin-bottom: 32px;
    font-weight: 400;
}

.patient-list {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.patient-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 16px;
    border-bottom: 1px solid #f7f8fa;
    cursor: pointer;
    transition: background-color 0.2s;
    position: relative;
}

.patient-item:last-child {
    border-bottom: none;
}

.patient-item:active {
    background-color: #f7f8fa;
}

.patient-info {
    flex: 1;
}

.patient-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.patient-name {
    font-size: 17px;
    color: #323233;
    font-weight: 500;
    margin-right: 8px;
}

.patient-tag {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
}

.patient-tag.self {
    background-color: #e8f4ff;
    color: #1989fa;
}

.patient-tag.parent {
    background-color: #fff2e8;
    color: #ff976a;
}

.patient-tag.spouse {
    background-color: #f0f9ff;
    color: #0ea5e9;
}

.patient-tag.child {
    background-color: #f0fdf4;
    color: #22c55e;
}

.patient-tag.other {
    background-color: #f8fafc;
    color: #64748b;
}

.patient-phone {
    font-size: 15px;
    color: #969799;
    line-height: 1.4;
}

.patient-action {
    display: flex;
    align-items: center;
}

.add-text {
    font-size: 14px;
    color: #969799;
}

.default-text {
    font-size: 14px;
    color: #1989fa;
    font-weight: 500;
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
}

.empty-state .van-button {
    margin-top: 20px;
}

/* 预约列表样式 */
.appointment-section {
    margin-top: 32px;
}

.section-title {
    font-size: 16px;
    color: #323233;
    margin-bottom: 16px;
    font-weight: 500;
}

.appointment-list {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.appointment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 16px;
    border-bottom: 1px solid #f7f8fa;
}

.appointment-item:last-child {
    border-bottom: none;
}

.appointment-info {
    flex: 1;
}

.appointment-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.doctor-name {
    font-size: 16px;
    color: #323233;
    font-weight: 500;
    margin-right: 12px;
}

.department-name {
    font-size: 14px;
    color: #1989fa;
    background-color: #e8f4ff;
    padding: 2px 8px;
    border-radius: 12px;
}

.appointment-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-row {
    display: flex;
    align-items: center;
}

.label {
    font-size: 14px;
    color: #969799;
    margin-right: 8px;
    min-width: 70px;
}

.value {
    font-size: 14px;
    color: #323233;
}

.value.cost {
    color: #ff976a;
    font-weight: 500;
}

.appointment-status {
    display: flex;
    align-items: center;
}

.status-tag {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.status-tag.active {
    background-color: #e8f8f5;
    color: #52c41a;
}

.status-tag.inactive {
    background-color: #fff2e8;
    color: #ff976a;
}

/* 分页信息样式 */
.pagination-info {
    margin-top: 16px;
    text-align: center;
    font-size: 14px;
    color: #969799;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .page-content {
        padding: 16px;
    }

    .patient-item {
        padding: 24px 16px;
    }

    .patient-name {
        font-size: 16px;
    }

    .patient-phone {
        font-size: 14px;
    }

    .tip-text {
        font-size: 15px;
        margin-bottom: 20px;
    }
}

/* iPhone 样式适配 */
@media (max-width: 414px) {
    .patient-select-page {
        background-color: #f7f8fa;
    }

    :deep(.van-nav-bar) {
        padding: 0 16px;
    }

    .page-content {
        padding: 16px;
    }

    .patient-list {
        border-radius: 8px;
    }

    .patient-item {
        padding: 20px 16px;
    }
}
</style>